<template>
  <tm-drawer class="tm-start-drawer" :show-close="false" :visible.sync="show" width="80px">
    <div class="task-menu-mask"></div>
    <div class="task-menu-start" @click="showStartMenu = !showStartMenu">
      <i class="el-icon-s-help"></i>
    </div>
    <transition name="slide-left-in">
      <div
        class="task-menu-container"
        v-clickoutside:[innerDom]="handleClickoutside"
        v-show="showStartMenu"
      >
        <div
          class="task-menu-item"
          v-for="(item, i) in menu"
          :key="i"
          @click="item.handler"
          :title="item.title || '功能图标'"
        >
          <i :class="item.icon"></i>
        </div>
      </div>
    </transition>
    <div class="task-item" v-for="(item, i) in tasks" :key="i" @click="openModalItem(item)">
      <i :class="item.icon || 'el-icon-s-opportunity'"></i>
      <span>{{ item.title }}</span>
    </div>
  </tm-drawer>
</template>

<script>
import clickoutside from '../directives/clickoutside'
export default {
  directives: {
    clickoutside
  },
  data() {
    const that = this
    return {
      innerDom: '.tm-start-drawer',
      show: true,
      showStartMenu: false,
      tasks: [],
      menu: [
        {
          title: '数据中心',
          icon: 'el-icon-s-data',
          handler() {
            that.$modal
              .dialog('TmStorageView', {
                props: {
                  showMin: true,
                  showMax: true,
                  showFooter: true,
                  title: '油猴本地存储',
                  icon: 'el-icon-menu',
                  width: '80%',
                  height: '80%'
                }
              })
              .once('confirm', () => {
                console.log('confirm')
              })
              .once('cancel', () => {
                console.log('cancel')
              })
            that.showStartMenu = false
          }
        },
        {
          title: '测试htmlparse2',
          icon: 'el-icon-flag',
          handler() {
            let data = require('../data').default
            const cheerio = require('cheerio')
            const $cheerio = cheerio.load(data)
            console.log($cheerio('img'))
            // let htmlparser2 = require('htmlparser2')
            // let parser = new htmlparser2.Parser({
            //   onopentag(name, attrs) {
            //     if (name === 'div') {
            //       console.log(name, attrs)
            //     }
            //   }
            // })
            // parser.write(data)
            // parser.end()
          }
        },
        {
          title: '测试[http模块]访问百度',
          icon: 'el-icon-download',
          handler() {
            that.$http
              .get(`https://www.baidu.com/`, { t: '123' })
              .then((res) => {
                console.log(res)
              })
              .catch((err) => {
                console.log(err)
              })
          }
        },
        {
          title: '测试[http模块]下载图片功能',
          icon: 'el-icon-download',
          handler() {
            $('img').each(function (i, img) {
              const url = $(img).attr('src')
              that.$http.download(url, 'image_' + i).then((res) => {
                console.log('download', res)
              })
            })
          }
        }
      ]
    }
  },
  mounted() {
    this.$bus.$on('modal-created', this.onModalCreated)
    this.$bus.$on('modal-closed', this.onModalClosed)
    this.$bus.$on('try-open-instance', this.onTryOpenInstance)
    const hotKeyHandler = (evt) => {
      console.log(evt.keyCode)
      // esc, `
      if ([27, 192].includes(evt.keyCode)) {
        this.show = !this.show
        if (this.show) {
          this.showStartMenu = true
        } else {
          this.showStartMenu = false
        }
      }
    }
    $(window).on('keyup', hotKeyHandler)
    this.$on('hook:beforeDestroy', () => {
      $(window).off('keyup', hotKeyHandler)
    })
  },
  methods: {
    handleClickoutside() {
      this.showStartMenu = false
    },
    onModalCreated(modal) {
      const [instance] = modal.$children
      this.tasks.push({
        title: instance.title,
        icon: instance.icon,
        instance
      })
    },
    onModalClosed(modal) {
      const [instance] = modal.$children
      let item = this.tasks.find((x) => x.instance === instance)
      let index = this.tasks.indexOf(item)
      this.tasks.splice(index, 1)
    },
    onTryOpenInstance(modalOptions) {
      let task = this.tasks.find((task) => task.title === modalOptions.props.title)
      if (task) {
        this.openModalItem(task)
        this.$bus.$emit('try-open-instance-back', true)
      } else {
        this.$bus.$emit('try-open-instance-back', false)
      }
    },
    openModalItem(item) {
      let dialog = item.instance
      if (dialog.toggle) {
        dialog.toggle()
      } else {
        let [child] = dialog.$children
        child.toggle()
      }
    }
  }
}
</script>
